<template>
  <div>
    <el-form v-loading="loading" class="lineHeight32 mb0" label-width="110px" label-position="right">
      <el-row :gutter="8" :class="{'dividing': !isMobile}" class="response-el-row">
        <el-col :span="12" class="responsive-col-lg-8" >
          <el-form-item label="SKU编码:">
            <div style="display:flex;">
              <ToolTip :content="detailData.code" />
            </div>
          </el-form-item>
        </el-col>
        <el-col :span="12" class="responsive-col-lg-8" >
          <el-form-item label="创建时间:">
            <span>{{ detailData.createTime / 1000 | standardFormat('YYYY/MM/DD HH:mm') }}</span>
          </el-form-item>
        </el-col>
        <el-col :span="12" class="responsive-col-lg-8" >
          <el-form-item label="标题:">
            <ToolTip :content="detailData.title" />
          </el-form-item>
        </el-col>
        <el-col :span="12" class="responsive-col-lg-8" >
          <el-form-item label="IP形象/IP系列:">
            <ToolTip :content="`${detailData.ipName || '--'}/${detailData.ipSeriesName || '--'}`" />
          </el-form-item>
        </el-col>
        <el-col :span="12" class="responsive-col-lg-8" >
          <el-form-item label="商品属性:">
            <ToolTip :content="detailData.type" />
          </el-form-item>
        </el-col>
        <el-col :span="12" class="responsive-col-lg-8" >
          <el-form-item label="总库存:">
            <span>{{ detailData.inventoryCount | filterNon }}</span>
          </el-form-item>
        </el-col>
        <el-col :span="12" class="responsive-col-lg-8" >
          <el-form-item label="创建人:">
            <span>{{ detailData.creator || '--' }}</span>
          </el-form-item>
        </el-col>
        <el-col :span="12" class="responsive-col-lg-8" >
          <el-form-item label="仓库:">
            <span>{{ detailData.repository && detailData.repository.repositoryName || '--' }}</span>
          </el-form-item>
        </el-col>
        <el-col :span="12" class="responsive-col-lg-8" >
          <el-form-item label="销售量:">
            <span>{{ detailData.salesVolume | filterNon }}</span>
          </el-form-item>
        </el-col>
        <el-col :span="12" class="responsive-col-lg-8" >
          <el-form-item label="成本价(元):">
            <span>{{ detailData.cost | filterNon }}</span>
          </el-form-item>
        </el-col>
        <el-col :span="12" class="responsive-col-lg-8" >
          <el-form-item label="剩余库存:">
            <span>{{ detailData.currentInventoryCount | filterNon }}</span>
            <span
              v-if="hasRouteAuth('mengli:inventory:securityThresholdEdit')"
              class="form-item-action-text"
              @click="showSecurityDialog">
              安全值/建议值：{{ detailData.inventorySecurityVal | filterNon }}/{{ detailData.stockOutQuantity | filterNon }}
            </span>
          </el-form-item>
        </el-col>
        <el-col :span="12" class="responsive-col-lg-8" >
          <el-form-item label="包含残次品:">
            <span>{{ detailData.defectiveQuantity | filterNon }}</span>
            <span
              v-if="hasRouteAuth('mengli:inventory:defectiveStockOut')"
              class="form-item-action-text"
              @click="showDefectiveDialog"
            >残次品管理</span>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <securityValDialog
      ref="securityDialogRef"
      v-model="securityVal"
      :stock-out-quantity="detailData.stockOutQuantity"
      @confirm="securityValConfirm"
    />
    <defectiveDialog
      ref="defectiveDialogRef"
      :defective-quantity="detailData.defectiveQuantity"
      :remaining-quantity="detailData.currentInventoryCount"
      @confirm="defectiveConfirm"
    />
  </div>
</template>

<script>
import { standardFormat } from '@/filters/date';
import { hasRouteAuth } from '@/utils/permission';
import securityValDialog from './securityValDialog';
import defectiveDialog from './defectiveDialog';
export default {
  filters: {
    standardFormat,
    filterNon(val) {
      return (val !== 0 && !val) ? '--' : val;
    }
  },
  components: {
    securityValDialog,
    defectiveDialog
  },
  props: {
    detailData: {
      type: Object,
      default: () => {
        return {};
      }
    },
    loading: {
      type: Boolean,
      default: false
    },
    isMobile: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      securityVal: null
    };
  },
  methods: {
    hasRouteAuth,
    showSecurityDialog() {
      this.securityVal = this.detailData.inventorySecurityVal;
      this.$refs['securityDialogRef'].dialogVisible = true;
    },
    securityValConfirm() {
      this.$emit('securityValConfirm', this.securityVal);
    },
    showDefectiveDialog() {
      this.$refs['defectiveDialogRef'].dialogVisible = true;
    },
    defectiveConfirm(data) {
      this.$emit('defectiveConfirm', data);
    }
  }
};
</script>

<style lang="scss" scoped>
.mb0 {
  margin-bottom: 32px;
  &::v-deep {
    .el-form-item {
      margin-bottom: 0;
      .el-form-item__label {
        color: #999;
      }
    }
    .dividing{
      .el-col {
        .el-form-item__content {
          border-right: 1px solid #EBEEFD;
          color: #333;
        }
        @media only screen and (min-width: 1300px) {
          &:nth-child(3n) {
            .el-form-item__content {
              border-right: none;
            }
          }
        }
        @media screen and (max-width: 1300px) {
          &:nth-child(2n) {
            .el-form-item__content {
              border-right: none;
            }
          }
        }
        &:last-child {
          .el-form-item__content {
            border-right: none;
          }
        }
      }
    }
  }
  .form-item-action-text {
    text-decoration: underline;
    color: #406EFF;
    margin-left: 10px;
    cursor: pointer;
  }
}
</style>
